<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<body>

<header th:fragment="header()" class="am-topbar am-topbar-inverse admin-header">
    <div class="am-topbar-brand">
        <a href="javascript:;" class="tpl-logo">
            <img src="static/img/logo1.png" alt="">
        </a>
    </div>
    <div style="cursor:pointer" class="am-icon-list tpl-header-nav-hover-ico am-fl am-margin-right">

    </div>

    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
            data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span
            class="am-icon-bars"></span></button>

    <div class="am-collapse am-topbar-collapse" id="topbar-collapse">

        <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list tpl-header-list">
            <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
                <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
                    <span class="tpl-header-list-user-nick" id="userNameText"></span>
                    <span class="tpl-header-list-user-ico"> <img src="static/img/user.jpg"></span>
                </a>
                <ul class="am-dropdown-content">
                    <li><a href="javascript:;"><span class="am-icon-bell-o"></span> 资料</a></li>
                    <li><a href="javascript:;"><span class="am-icon-cog"></span> 设置</a></li>
                    <li><a href="javascript:;" onclick="logout()" ><span class="am-icon-power-off"></span> 退出</a></li>
                </ul>
            </li>
            <li><a href="javascript:;" onclick="logout()" class="tpl-header-list-link"><span
                    class="am-icon-sign-out tpl-header-list-ico-out-size"></span></a></li>
        </ul>
    </div>
</header>

<div th:fragment="menu(selector)" class="tpl-left-nav tpl-left-nav-hover">
    <div class="tpl-left-nav-title">
        菜单
    </div>
    <div class="tpl-left-nav-list">
        <ul class="tpl-left-nav-menu">
            <li class="tpl-left-nav-item">
                <a href="index" class="nav-link " th:classappend="${selector == 'home' } ? 'active' : ''">
                    <i class="am-icon-home am-icon-fw"></i>
                    <span>首页</span>
                </a>
            </li>

            <li class="tpl-left-nav-item">
                <a href="javascript:;" class="nav-link tpl-left-nav-link-list"
                   th:classappend="${selector == 'module'} ? 'active' : ''">
                    <i class="am-icon-cubes am-icon-fw"></i>
                    <span>数据源</span>
                    <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
                </a>
                <ul class="tpl-left-nav-sub-menu" th:classappend="${selector == 'module'} ? 'dp-block' : ''">
                    <li>
                        <a th:href="|${contextPath}/module|" th:classappend="${selector == 'module'} ? 'active' : ''">
                            <i class="am-icon-angle-right"></i>
                            <span>数据源管理</span>
                        </a>
                    </li>
                </ul>
            </li>

            <li class="tpl-left-nav-item">
                <a href="javascript:;" class="nav-link tpl-left-nav-link-list"
                   th:classappend="${selector == 'user'} ? 'active' : ''">
                    <i class="am-icon-users am-icon-fw"></i>
                    <span>用户管理</span>
                    <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
                </a>
                <ul class="tpl-left-nav-sub-menu" th:classappend="${selector == 'user'} ? 'dp-block' : ''">
                    <li>
                        <a th:href="|${contextPath}/user|" th:classappend="${selector == 'user'} ? 'active' : ''">
                            <i class="am-icon-angle-right"></i>
                            <span>用户数据管理</span>
                        </a>
                    </li>
                </ul>
            </li>

            <li class="tpl-left-nav-item">
                <a href="javascript:;" class="nav-link tpl-left-nav-link-list"
                   th:classappend="${selector == 'panel'||selector == 'element'} ? 'active' : ''">
                    <i class="am-icon-area-chart am-icon-fw"></i>
                    <span>大屏管理</span>
                    <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
                </a>
                <ul class="tpl-left-nav-sub-menu" th:classappend="${selector == 'panel'||selector == 'element'} ? 'dp-block' : ''">
                    <li>
                        <a th:href="|${contextPath}/panel|" th:classappend="${selector == 'panel'} ? 'active' : ''">
                            <i class="am-icon-angle-right"></i>
                            <span>用户大屏管理</span>
                        </a>
                        <a th:href="|${contextPath}/element|" th:classappend="${selector == 'element'} ? 'active' : ''">
                            <i class="am-icon-angle-right"></i>
                            <span>图表元素管理</span>
                        </a>
                    </li>
                </ul>
            </li>


        </ul>
    </div>
</div>
</body>
</html>